<template>
  <page-header-wrapper>
    <a-card>
      <a-tabs type="card" default-active-key="1" v-model="page">
        <a-tab-pane key="1" tab="项目细节">
          <ProjectDetail />
        </a-tab-pane>
        <a-tab-pane key="2" tab="项目进度">
          <Progress />
        </a-tab-pane>
        <a-tab-pane key="3" tab="利息/贷款限额费分摊">
          <Interest v-if="page == 3" />
        </a-tab-pane>
        <a-tab-pane key="4" tab="贷款明细">
          <Detail v-if="page == 4" />
        </a-tab-pane>
        <a-tab-pane key="5" tab="备注">
          <Remarks />
        </a-tab-pane>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import ProjectDetail from './detail.vue'
import Progress from './projectProgress.vue'
import Interest from './interest.vue'
import Remarks from './remarks.vue'
import Detail from './loanDetail.vue'
export default {
  data() {
    return {
      name: 'project',
      page: '1'
    }
  },
  methods: {},
  components: {
    ProjectDetail,
    Progress,
    Interest,
    Remarks,
    Detail
  }
}
</script>
<style>
.ant-tabs {
  overflow: unset;
}
.card-container {
  background: #f5f5f5;
  /* overflow: hidden; */
  padding: 24px;
}
.card-container > .ant-tabs-card > .ant-tabs-content {
  height: 120px;
  margin-top: -16px;
}

.card-container > .ant-tabs-card > .ant-tabs-content > .ant-tabs-tabpane {
  background: #fff;
  padding: 16px;
}

.card-container > .ant-tabs-card > .ant-tabs-bar {
  border-color: #fff;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab {
  border-color: transparent;
  background: transparent;
}

.card-container > .ant-tabs-card > .ant-tabs-bar .ant-tabs-tab-active {
  border-color: #fff;
  background: #fff;
}

.add {
  float: right;
  margin-bottom: 10px;
  margin-right: 20px;
}
</style>
